<!DOCTYPE html>
<html lang="en">
<!--
	作者：梁家宝
	时间：2019-05-29
	描述：角色管理表的添查修改
-->
	<head>
		<meta charset="UTF-8">
		<title>角色管理</title>
		<link rel="stylesheet" href="../../../js/bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../../js/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
		<link rel="stylesheet" href="../../../js/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
		<link rel="stylesheet" href="../../../js/bower_components/bootstrap-table/dist/bootstrap-table.min.css">
		<link rel="stylesheet" href="../../../js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css">

		<script src="../../../js/bower_components/jquery/dist/jquery.min.js"></script>
		<script src="../../../js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="../../../js/bower_components/bootbox.min.js"></script>
		<script src="../../../js/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
		<script src="../../../js/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
		<script src="../../../js/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
		<script src="../../../js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

		<script src="../../../js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
		<script src="../../../js/bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
		<script src="../../../js/bower_components/moment/min/moment-with-locales.min.js"></script>
		<script>
			var temp_rid = 0;
			$(function() {
				//下拉框是否启用进行绑定
				SelRisbegin();
				SelRisbegin1()
				SelRisbegin2();
				$.ajax({
					type: "get",
					url: "http://127.0.0.1:8080/getAll",
					dataType: "json",
					contentType: "application/json;charset=utf-8",
					success: function(data) {
						console.log(data);
						console.log(data.data.list)
						CreateRoleTable(data.data.list)
					}
				});
				//CreateRoleTable("");
				//新增数据
				$("#butAdd").click(function() {
					alert("ssss")
					$("#divData").modal();
				});
				//保存数据
				$("#btnSave").click(function() {
					var rid = $("#txtRolerid").val();
					var rname = $("#txtRoleName1").val();
					var risbegin = $("#selrisbegin1").selectpicker('val');
					alert(rid + "--" + rname + "--" + risbegin)
					var str = '{"ribegin": "' + risbegin + '","rid":' + rid + ',"rname": "' + rname + '"}'
					$.ajax({
						type: "put",
						url: "http://127.0.0.1:8080/addRole",
						data: str,
						dataType: "json",
						contentType: "application/json;charset=utf-8",
						success: function(data) {
							if(data == 1) {
								$.ajax({
									type: "get",
									url: "http://127.0.0.1:8080/getAll",
									dataType: "json",
									contentType: "application/json;charset=utf-8",
									success: function(data) {
										CreateRoleTable(data.data.list);
										emptyData();
									}
								});
							}

						}
					});
				})
				//删除数据
				$("#butDel").click(function() {
					var rid = temp_rid;
					alert("确认删除角色的主键是：" + rid)
					$.ajax({
						type: "get",
						url: "http://127.0.0.1:8080/delRole",
						data: "rid=" + rid,
						dataType: "json",
						contentType: "application/json;charset=utf-8",
						success: function(data) {
							alert(data);
							if(data == 1) {
								$.ajax({
									type: "get",
									url: "http://127.0.0.1:8080/getAll",
									dataType: "json",
									contentType: "application/json;charset=utf-8",
									success: function(data) {
										CreateRoleTable(data.data.list)
									}
								});
							} else {
								alert("删除失败")
							}
						}
					});
				});
				//修改数据之前获取数据的方法
				$("#butEdit").click(function() {
					var rid = temp_rid;
					if(rid > 0) {
						$.ajax({
							type: "get",
							url: "http://127.0.0.1:8080/getOne",
							data: "rid=" + rid,
							dataType: "json",
							contentType: "application/json;charset=utf-8",
							success: function(data) {
								alert(data);
								if(data != null) {
									$("#divData2").modal();
									$("#txtRolerid2").val(data.rid);
									$("#txtRolerid2").attr("readonly","true");
									$("#txtRoleName2").val(data.rname);
									$("#selrisbegin2").selectpicker('val',data.ribegin);
									
											$("#btnSave2").click(function() {
					var rid2 = $("#txtRolerid2").val();
					var rname2 = $("#txtRoleName2").val();
					var risbegin2 = $("#selrisbegin2").selectpicker('val');
					var str2 = '{"ribegin": "' + risbegin2 + '","rid":' + rid2 + ',"rname": "' + rname2 + '"}'
					$.ajax({
						type: "put",
						url: "http://127.0.0.1:8080/updateRole",
						data: str2,
						dataType: "json",
						contentType: "application/json;charset=utf-8",
						success: function(data) {
							if(data == 1) {
								$.ajax({
									type: "get",
									url: "http://127.0.0.1:8080/getAll",
									dataType: "json",
									contentType: "application/json;charset=utf-8",
									success: function(data) {
										CreateRoleTable(data.data.list);
										emptyData();
									}
								});
							}

						}
					});
				})
								} 
							}
						});
					}
				})
				
			});

			//给下拉框绑定动态数据
			function SelRisbegin() {
				$("#selrisbegin").empty();
				$.ajax({
					type: "get",
					url: "http://127.0.0.1:8080/getIsBegin",
					dataType: "json",
					success: function(data) {
						console.log(data.list);
						//绑定数据
						$.each(data, function(i, n) {
							$("#selrisbegin").append("<option value='" + n.ribegin + "'>" + n.ribegin + "</option>");
						});
						//刷新下拉框
						$("#selrisbegin").selectpicker("refresh");
					}
				});
			}

			//对角色列表加载动态数据
			function CreateRoleTable(data) {
				//			console.log("进入绑定事件"+data)
				$("#tabRole").bootstrapTable("destroy");
				$("#tabRole").bootstrapTable({
					loadMsg: "数据正在加载中....",
					uniqueId: "rid", //绑定列表主键（数据库主键）
					pageSize: 5,
					pagination: true,
					idFied: "rid",
					onClickRow: function(row) {
						alert(row.rid);
						temp_rid = row.rid;
					},
					data: data,
					columns: [{
						field: "rid",
						title: "角色主键"
					}, {
						field: "rname",
						title: "角色名称"
					}, {
						field: "ribegin",
						title: "是否启用"
					}]
				});
				//给下拉框绑定json数据
			}

			function SelRisbegin1() {
				$("#selrisbegin").empty();
				$.ajax({
					type: "get",
					url: "../json/sysRole.json",
					dataType: "json",
					success: function(data) {
						console.log(data.list);
						//绑定数据
						$.each(data, function(i, n) {
							$("#selrisbegin1").append("<option value='" + n.ribegin + "'>" + n.ribegin + "</option>");
						});
						//刷新下拉框
						$("#selrisbegin1").selectpicker("refresh");
					}
				});
			}
			function SelRisbegin2() {
				$("#selrisbegin").empty();
				$.ajax({
					type: "get",
					url: "../json/sysRole.json",
					dataType: "json",
					success: function(data) {
						console.log(data.list);
						//绑定数据
						$.each(data, function(i, n) {
							$("#selrisbegin2").append("<option value='" + n.ribegin + "'>" + n.ribegin + "</option>");
						});
						//刷新下拉框
						$("#selrisbegin2").selectpicker("refresh");
					}
				});
			}
			//清空表单数据
			function emptyData() {
				$("#txtRolerid").val("");
				$("#txtRoleName1").val("");
			}
		</script>

	</head>

	<body>
		<div class="container-fluid">
			<!--查询区域-->
			<div class="row col-md-10">
				<div class="form-inline">
					<div class="form-group">
						<label class="control-label" for="txtRoleName">角色名称</label>
						<input class="form-control" id="txtRoleName" />
					</div>
					<div class="form-group">
						<label class="control-label">角色是否启用</label>
						<select id="selrisbegin"></select>
					</div>
					<div class="form-group">
						<button type="button" class="btn btn-primary">查询</button>
					</div>
				</div>
			</div>
			<br /><br /><br />
			<!--功能区域-->
			<div class="row col-md-10">
				<div>
					<button type="button" id="butAdd" class="btn btn-success">新增</button>
					<button type="button" id="butEdit" class="btn btn-info">修改</button>
					<button type="button" id="butDel" class="btn btn-danger">删除</button>
				</div>
			</div>
			<br /><br /><br />
			<!--列表区域-->
			<div class="row col-md-10">
				<table id="tabRole"></table>
			</div>
			<!--新增表单区域-->
			<div class="modal fade" id="divData" tabindex="1">
				<div class="modal-dialog" style="width: 500px;">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">新增角色信息</h4>
						</div>
						<div class="modal-body form-inline">
							<div class="form-group">
								<label class="control-label">角色主键</label>
								<input type="number" maxlength="20" class="from-control" id="txtRolerid" />
							</div>
							<br /><br />
							<div class="form-group">
								<label class="control-label">角色名称</label>
								<input type="text" maxlength="20" class="from-control" id="txtRoleName1" />
							</div>
							<br /><br />
							<div class="form-group">
								<label class="control-label">是否启用</label>
								<select id="selrisbegin1">

								</select>
							</div>
							<br /><br />
							<div class="modal-footer">
								<button type="button" class="btn btn-success" id="btnSave" data-dismiss="modal">保存</button>
								<button type="button" class="btn btn-primary" id="btnClose" data-dismiss="modal">取消</button>
							</div>
						</div>
					</div>
				</div>
			</div>
					<!--修改表单区域-->
			<div class="modal fade" id="divData2" tabindex="2">
				<div class="modal-dialog" style="width: 500px;">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title">新增角色信息</h4>
						</div>
						<div class="modal-body form-inline">
							<div class="form-group">
								<label class="control-label">角色主键</label>
								<input type="number" maxlength="20" class="from-control" id="txtRolerid2" />
							</div>
							<br /><br />
							<div class="form-group">
								<label class="control-label">角色名称</label>
								<input type="text" maxlength="20" class="from-control" id="txtRoleName2" />
							</div>
							<br /><br />
							<div class="form-group">
								<label class="control-label">是否启用</label>
								<select id="selrisbegin2">

								</select>
							</div>
							<br /><br />
							<div class="modal-footer">
								<button type="button" class="btn btn-success" id="btnSave2" data-dismiss="modal">保存</button>
								<button type="button" class="btn btn-primary" id="btnClose2" data-dismiss="modal">取消</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>